
<template>
  <div class="detailSet">
    <div class="accountHeader">
      <div style="margin: 0 20px 0px 20px">{{ botName }}</div>
      <el-button size="small" plain round @click="setLeverUp">
        返回上一级
      </el-button>
    </div>
    <div class="content">
      <SelectTab @changeTab="changeTab" :tabList="tabList" v-if="tabList.length"></SelectTab>
      <div style="min-height: 300px">
        <BasicSet :currentBotId="currentBotId" v-if="activeTab === 1" @setBotName="setBotName"></BasicSet>
        <ReplySet  v-if="activeTab === 2"></ReplySet>
        <OtherSet v-if="activeTab === 3"></OtherSet>
      </div>
    </div>
  </div>
</template>
<script setup>
import SelectTab from "@/components/selectTab/index.vue";
import BasicSet from "./basicSet/index.vue"
import ReplySet from "./replySet/index"
import OtherSet from "./otherSet/index"
import {ref, onMounted, provide} from "vue";
const props = defineProps({
  currentBotId: {
    type:Number,
    default: 0
  }
})
provide("currentBotId", props.currentBotId)
const activeTab = ref()
const tabList = [
  {id: 1, name:"基础设置"},
  {id: 2, name:"智能回复"},
  {id: 3, name:"其他设置"}
]
const changeTab = (e) => {
  activeTab.value = e
}
const botName = ref('')
const setBotName = (name) => {
  botName.value = name
}

const emits = defineEmits(['setLeverUp'])
const setLeverUp = () => {
  emits("setLeverUp", 1)
}
</script>
<style scoped lang="scss">
.accountHeader {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
.content{
  border: 1px solid $borderColor;
  margin-top: 10px;
}
</style>